<template>
  <div class="taskList-wrapp">
    <div class="taskall-content">
      <el-table :data="tableData" style="width: 100%"
      @cell-mouse-enter="MouseEnter"
      @cell-mouse-leave="tableMouseLeave"
      @row-click="tableRowClick"
      :default-sort = "{prop: 'procDesc', order: 'descending'}">
        <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        label="编号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.taskId }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="发起人" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="任务类型" width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="标记" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{scope.row.type }}</span>
          <!-- <span style="margin-left: 10px" v-if="scope.row.taskStatus===1" class="iconfont icon-chaosong"></span>
          <span style="margin-left: 10px"  v-else-if="scope.row.taskStatus===2" class="iconfont icon-xietong"></span>
          <span style="margin-left: 10px"  v-else-if="scope.row.taskStatus===3" class="iconfont icon-faburenwu"></span>
          <span style="margin-left: 10px" v-else-if="scope.row.taskStatus===4" class="iconfont icon-zhuanfa"></span> -->
        </template>
      </el-table-column>

      <el-table-column label="任务说明" prop="procDesc">
      </el-table-column>

      <el-table-column
        label="任务进度" width="200"
        sortable>
        <template slot-scope="scope">
          <span><el-progress :percentage="scope.row.progress"></el-progress></span>
        </template>
      </el-table-column>

        <el-table-column
          label="发布时间"
          width="180"
          sortable>
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
            <div class="handlebox" v-if="(tableIndex === scope.row.procInstanceId)">
              <i title="完成" class="iconfont icon-wancheng" @click.stop="task_finish(scope.row.taskId)"></i>
              <i title="标记" class="iconfont icon-biaojijiaohu" @click.stop="task_sign(scope.row.taskId)"></i>
              <i title="延时" class="iconfont icon-yanshi" @click.stop="task_delay(scope.row.taskId)"></i>
              <i title="删除" class="iconfont icon-shanchu" @click.stop="task_del(scope.row.taskId)"></i>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="list_footer">
       <span>已经选择<em>2</em>个任务</span> <el-button type="primary" size="small">成功按钮</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props:["tableData","RowClick","task_finish","task_sign","task_delay","task_del"],
  data(){
    return{
      tableIndex:''
    }
  },
  methods:{
    MouseEnter(row, column, cell, event){
        this.tableIndex = row.procInstanceId;
    },
    tableMouseLeave(){
        this.tableIndex = ""
    },
    tableRowClick(row, event, column){
      this.RowClick(row, event, column);
    }
  }
}
</script>
<style scoped lang="scss">
  @import "./task.scss";
</style>
